<template>
  <div class="hello-world">
    <h2>{{ msg }}</h2>
    <el-divider />
    <p>
      <el-button type="primary" @click="handleClick">使用Pinia状态</el-button>
      <span class="counter">计数: {{ counter.count }}</span>
    </p>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

defineProps<{
  msg: string
}>()

const counter = useCounterStore()

const handleClick = () => {
  counter.increment()
}
</script>

<style scoped>
.hello-world {
  margin: 20px 0;
}

.counter {
  margin-left: 15px;
  font-weight: bold;
}
</style>
